<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <!-- 上边轮播图和主题内容区 -->
  <div class="cont">
    <!-- //轮播图区 -->
    <div class="head">

      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img id="img1" src="../../assets/imgs/index-swiper-bg1.jpg">
          </div>
          <div class="swiper-slide">
            <img id="img1" src="../../assets/imgs/index-swiper-bg2.jpg" >
          </div>
          <div class="swiper-slide">
            <img id="img1" src="../../assets/imgs/index-swiper-bg3.jpg">
          </div>

        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!-- 主体内容区 -->
    <main class="main">
      <!-- //今日排名和累计打卡 -->
      <div class="dv1">
        <!-- 今日排名 -->
        <div class="rank">
          <span class="rk">今日排名</span>
          <span class="day">9</span>
          <img src="../../assets//imgs/index-card-rank.png">
        </div>
        <!-- 累计打卡23天 -->
        <div class="punchCard">
          <span class="accumlate">累计打卡23天</span>
          <div id="clock"><span class="nowcard clock">今日打卡</span></div>
          <img src="../../assets/imgs/index-card-sum.png">

        </div>
      </div>
      <div class="dv2">
        <div class="rundata">
          <div class="rundatatxt">运动数据</div>
        </div>
        <a href="./mybadge.html" class="badge">
          <div class="badgetxt">累计运动徽章</div>
          <div class="munber">3</div>
          <div class="mei">枚</div>
          <img src="../../assets/imgs/index-card-badge.png" alt="">
        </a>

      </div>
      <!-- 课程训练 -->
      <div class="dv3">
        <div class="course">
          课程训练
        </div>
        <!-- 户外跑步 -->
      </div>
      <div class="dv4">
        <div class="run">
          户外跑步
        </div>

      </div>

    </main>


  </div>

  <!-- 底部tabar -->
  <!-- <footer class="foot">
    <a href="#" class="active">
      <span class="iconfont icon-shouye "></span>
      <p class="">首页</p>
    </a>
    <a href="./run.html" class="">
      <span class="iconfont icon-aixin"></span>
      <p>运动</p>
    </a>
    <a href="#">
      <span class="iconfont icon-wode-"></span>
      <p>圈子</p>
    </a>
    <a href="./mine.html">
      <span class="iconfont icon-quanzi"></span>
      <p>我的</p>
    </a>

  </footer> -->
  <script src="../../lib/swiper/swiper-bundle.min.js"></script>
</body>

</html>